<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11判断表单</title>
    <style>
        #box{
            text-align: center;
            margin: 100px auto;
        }
        #box span{
            display: inline-block;
            width: 150px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            border: 1px solid #ccc;
            color: #999;
            background-color: #eee;
        }
        .right {  /*正确的*/
            color: #5EFF5E;
            background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
            border: 1px solid #ACFFAC;
        }
        .wrong {  /*错误的*/
            background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
            border: 1px solid #FFAC91;
            color: #FF6B39;
        }
    </style>
    <script>
        window.onload=function () {
            var score = document.getElementById("score");
            var result = document.getElementById("result");
            score.onblur = function () {
                if(this.value==""){
                    result.className = "wrong";
                    result.innerHTML = "请输入分数";
                }else if(isNaN(this.value)){
                    result.className="wrong";
                    result.innerHTML = "请输入数字";
                }else if(this.value>=150 || this.value<=0){
                    result.className="wrong";
                    result.innerHTML = "请输入正确分值"
                }else{
                    result.className="right";
                    result.innerHTML ="输入正确";
                }
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="text" name="score" id="score">
        <span id="result">请输入</span>
    </div>
</body>
</html>